<template>
  <view class="container qj-bg-color">
    <view class="header flex items-center w-full rounded-bl-3xl rounded-br-3xl">
      <view class="flex justify-center w-2/3">
        <text class="first text-base text-white break-words flex items-end ">账户余额</text>
        <text class="jinbi text-white flex items-end mx-2">{{ user.now_money || 0 }}</text>
        <text class="flex items-end text-base text-white ">币</text>
      </view>
      <view class="flex justify-center w-1/3">
        <image src="@/static/image/xiaofeijilu.png" class=" w-5 h-5" @tap="uiwu.openWindow('/pages/recharge/record')" />
        <!-- <image src="@/static/image/xiaofeijilu.png" class=" w-5 h-5 ml-3" /> -->
      </view>
    </view>

    <Gap height="50rpx" />
    <view class="coinshop bg-image w-94 flex justify-center ">
      <view class="coin-box flex flex-wrap justify-between mt-12 ">
        <view class="coin flex flex-col items-center" v-for="(item, index) in rechargeList" :key="index"
          @tap="checkedPaytype(item)">
          <image class="coinbg" src="@/static/image/coin-4.png" mode="scaleToFill" />
          <text class="cointext my-1 text-sm ">充值{{ item.coin }}币送{{ item.give_coin }}币</text>
          <view class="coinbtn bg-image flex justify-center items-center text-white text-base font-bold">充值{{
            item.price }}元
          </view>
        </view>
      </view>
    </view>
    <Gap height="160rpx" />
  </view>
  <Payment :items="itemInfo" v-model="showModel" v-if="showModel" />

</template>

<script setup lang="ts">
import { apiIosPayStatus, rechargeRecharge, rechargelist, uiwu } from "@/api/interface/interface";
import type { ApiResponse, Recharge, RechargeQuota } from "@/api/type/interface";
import Gap from "@/components/gap.vue";
import Payment from "@/components/payment.vue";
import { onLoad } from "@dcloudio/uni-app";
import { computed, provide, reactive, ref } from "vue";
import { userStore } from "@/store/userStore";
import { configStore } from "@/store/configStore";
const itemInfo = ref({});
const rechargeList = reactive<RechargeQuota[]>([]);
const showModel = ref(false);

/**
 * 获取充值套餐列表
 */
const getrechargelist = async (): Promise<any> => {

  const result: ApiResponse<Recharge> = await rechargelist();
  if (result.data.recharge_quota) {
    rechargeList.push(...result.data.recharge_quota);
  }
}

const user = computed(() => {
  const { userInfo } = userStore();
  return userInfo;
});

onLoad(() => {
  provide("itemInfo", itemInfo);
  getrechargelist();
});


const checkedPaytype = async (item: any) => {


  itemInfo.value = item

  // #ifdef WEB || MP-WEIXIN
  showModel.value = true
  // #endif

  // #ifdef APP-PLUS
  if (uiwu.system() == 'android') {
    showModel.value = true
    return
  }

  const { app } = configStore();
  if (app?.ios_h5pay == 1) {
    showModel.value = true
    return
  }

  uiwu.loading('获取订单信息...', true)
  const { data: { data: { order_id } } } = await rechargeRecharge({
    recharge_id: item.id,
    coupon_user_id: 0,
    pay_type: 'ios'
  })
  const { transactionReceipt } = await uiwu.applePay({
    productid: item.productid,
    order_id
  })
  const result = await apiIosPayStatus({
    receipt: transactionReceipt,
    order_id: order_id,
    status: 0,
    type: 'recharge'
  })
  if (!result) return
  uiwu.hideloading()
  uiwu.toast('充值成功')
  const { updateUserInfo } = userStore();
  updateUserInfo();
  // #endif

}





</script>

<style lang="scss" scoped>
.container {
  overflow-y: visible;
  background: rgba(247, 248, 249, 1);

  .header {
    height: 182rpx;
    background: linear-gradient(211.08deg, rgba(237, 121, 126, 1) 0%, rgba(230, 0, 18, 1) 100%);
  }

  .first {
    // width: 35px;s
    color: white;
  }

  .jinbi {
    font-size: 42px;
    line-height: 42px;
  }

  .coinshop {
    height: 585px;
    background-image: url('@/static/image/coinshop.png');

    .coin-box {
      width: 92%;
    }

    .coin {
      width: 160px;
      height: 165px;
      background: url("@/static/image/coin_bground.png");
      background-size: 100% 100%;

      .coinbg {
        width: 83px;
        height: 72px;
      }

      .cointext {
        color: rgba(92, 0, 0, 1);
      }

      .coinbtn {
        width: 103px;
        height: 43px;
        background-image: url('@/static/image/chonzhi-button.png');
      }
    }

  }
}
</style>
